<script setup>
import {defineProps, ref,defineEmits} from "vue";
import {ElMessage} from "element-plus";
import {Plus, UploadFilled} from "@element-plus/icons-vue";
import {getUser, updateUser, uploadAvatar} from "../../../../api/user/user.js";
import {isPermission} from "@/utils/utils.js";
// 接收父组件传递的 isUpdate prop

const emit=defineEmits(['close'])
const props=defineProps(['isUpdate']);
const isUpdate = ref(false);
isUpdate.value = props.isUpdate;

const file = ref(null);

const formLabelAlign = ref({})

// 取消
const handleCancel=()=>{
  emit('close');
}
// 获取用户信息
const getUserInfo=async ()=>{
  await getUser().then(res=>{
    formLabelAlign.value=res.data;
    formLabelAlign.value.type=options[formLabelAlign.value.type];
    console.log(formLabelAlign.value);
  })
}

// 编辑信息
const handleUpdateInformation=async ()=>{
  console.log(formLabelAlign.value);
  await updateUser(formLabelAlign.value).then(res=>{
    ElMessage.success('修改信息成功');
    emit('close')
  });
}
function getHeaderFileLink(file) {
  formLabelAlign.value.headerLink = file.data;
}

function getPhotoFileLink(file) {
  formLabelAlign.value.photoLink = file.data;
}
// 选项
const options = [
    { label: '学生',value: 0,},
    { label: '老师',value: 2,}
];

getUserInfo();

</script>

<template>
  <el-dialog v-model="isUpdate" title="编辑资料" width="500px">
    <el-form
        label-position="left"
        label-width="auto"
        :model="formLabelAlign"
        style="max-width: 600px"
    >

      <el-form-item label="头像">
        <el-upload
            action="/api/user/upload"
            drag
            :on-success="getHeaderFileLink"
            style="width: 400px"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽图片到此处或者 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="证件照">
        <el-upload
            action="/api/user/upload"
            drag
            :on-success="getPhotoFileLink"
            style="width: 400px"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽图片到此处或者 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username" placeholder="请输入用户名"/>
      </el-form-item>

      <el-form-item label="地址">
        <el-input v-model="formLabelAlign.address" placeholder="请输入地址"/>
      </el-form-item>

      <el-form-item label="身份">
        <el-select
            v-model="formLabelAlign.role"
            placeholder="请选择身份"
            style="width: 500px"
            :disabled="!isPermission('null')"
        >
          <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div style="  display: flex;justify-content: center; /* 水平居中 */">
        <el-button type="primary" @click="handleUpdateInformation">确认</el-button>
        <el-button type="danger" @click="handleCancel">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="less">

</style>